<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/small-video.css">
    <style>
        .right-move:hover ul {
            display: block;
        }
        .right-move ul li::after {
            position: absolute;
            content: "";
            width: 100%;
            border-bottom: 1px solid #f0f0f0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <!-- 顶部 -->
    <div class="top">
        <div class="top-left">
            <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/logo@3x.png" alt="">
        </div>
        <div class="top-center">
            发现最新最热电影
        </div>
        <div class="split"></div>
        <div class="top-right">
            <span>打开App</span>
            <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/point.png" alt="">
        </div>
    </div>
    <div class="top-img">
        <div class="name">猫眼电影</div>
        <div class="right-move">
            <ul>
                <li>
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <a href="./list.html">榜单</a>
                </li>
                <li>
                    <a href="./hotspot.html">热点</a>
                </li>
                <li>
                    <a href="./tab-with-segmented-control.html">商城</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="content">
        <a href="https://i.maoyan.com/asgard/live/index?_v_=yes&id=6976875">
            <div class="content-img" style="background-image: url(http://p1.meituan.net/movie/9323f2b8bc4d5e08199566b71e28e98a202763.jpg); background-size: cover; background-repeat: no-repeat;background-position: -135px;">
                <div class="title">
                    《儿大不由爹》搞笑父子的欢乐日常，笑就完事儿了
                </div>
                <div class="more">
                    <img src="https://p0.meituan.net/moviemachine/e4baddbde32b052b9d18e0966a205f15323593.png@43w_43h_80q"
                        alt="" class="img-1">
                    <div class="one">影视快闪</div>
                    <img src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q" alt=""
                        class="img-2">
                    <div class="two">78</div>
                </div>
            </div>
        </a>
        <a href="https://i.maoyan.com/asgard/live/index?_v_=yes&id=7010248">
            <div class="content-img" style="background-image: url(http://p1.meituan.net/movie/7f81399ca68880c593a12e1a06323354623643.jpg); background-size: cover; background-repeat: no-repeat;background-position: -135px;">
                <div class="title" >
                    徐峥宋佳赶出门片段中，宋佳直接“对瓶吹”药酒，太有趣了
                </div>
                <div class="more">
                    <img src="https://p1.meituan.net/moviemachine/6d977d7394fa54781ffa63d11a57bb6f23890.png@43w_43h_80q"
                        alt="" class="img-1">
                    <div class="one">好片场</div>
                    <img src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q" alt=""
                        class="img-2">
                    <div class="two">62</div>
                </div>
            </div>
        </a>
        <a href="https://i.maoyan.com/asgard/live/index?_v_=yes&id=6936627">
            <div class="content-img" style="background-image: url(http://p0.meituan.net/moviemachine/1f0d6cec57cd04bf96720c72699c9b40217054.png); background-size: cover; background-repeat: no-repeat;background-position: 0px;">
                <div class="title">
                    科幻电影《沙丘》中国首映礼
                </div>
                <div class="more">
                    <img src="https://p1.meituan.net/moviemachine/8de6710fb4c92e2d22c236ef8e86bff059705.png@43w_43h_80q"
                        alt="" class="img-1">
                    <div class="one">嘿果树</div>
                    <img src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q" alt=""
                        class="img-2">
                    <div class="two">55</div>
                </div>
            </div>
        </a>
        <a href="https://i.maoyan.com/asgard/live/index?_v_=yes&id=6970965">
            <div class="content-img" style="background-image: url(http://p1.meituan.net/moviemachine/9bb1e2544c92fed8618d3c40db8bad2d341670.png); background-size: cover; background-repeat: no-repeat;background-position: 0px;">
                <div class="title">
                    电影拍摄现场，是大制作无疑了
                </div>
                <div class="more">
                    <img src="https://p0.meituan.net/moviemachine/e80549d229045181f4e783e62fe99c1669825.png@43w_43h_80q"
                        alt="" class="img-1">
                    <div class="one">大闹好莱坞</div>
                    <img src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q" alt=""
                        class="img-2">
                    <div class="two">209</div>
                </div>
            </div>
        </a>
        <a href="https://i.maoyan.com/asgard/live/index?_v_=yes&id=6908055">
            <div class="content-img" style="background-image: url(http://p1.meituan.net/movie/b828287ef8604de4f6c036018f77d82090073.jpg); background-size: cover; background-repeat: no-repeat;background-position: 0px;">
                <div class="title">
                    《儿大不由爹》搞笑父子的欢乐日常，笑就完事儿了
                </div>
                <div class="more">
                    <img src="https://p0.meituan.net/moviemachine/e4baddbde32b052b9d18e0966a205f15323593.png@43w_43h_80q"
                        alt="" class="img-1">
                    <div class="one">影视快闪</div>
                    <img src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q" alt=""
                        class="img-2">
                    <div class="two">78</div>
                </div>
            </div>
        </a>
        <a href="https://i.maoyan.com/asgard/live/index?_v_=yes&id=6949001">
            <div class="content-img" style="background-image: url(http://p0.meituan.net/moviemachine/02e9b1cccac98645399e71b510e146cb327133.png); background-size: cover; background-repeat: no-repeat;background-position: 0px;">
                <div class="title">
                    徐峥宋佳赶出门片段中，宋佳直接“对瓶吹”药酒，太有趣了
                </div>
                <div class="more">
                    <img src="https://p1.meituan.net/moviemachine/6d977d7394fa54781ffa63d11a57bb6f23890.png@43w_43h_80q"
                        alt="" class="img-1">
                    <div class="one">好片场</div>
                    <img src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q" alt=""
                        class="img-2">
                    <div class="two">62</div>
                </div>
            </div>
        </a>
        <a href="https://i.maoyan.com/asgard/live/index?_v_=yes&id=6962827">
            <div class="content-img" style="background-image: url(http://p1.meituan.net/moviemachine/35d51667b579cb6bb1a06f8a1cf712c3330298.png); background-size: cover; background-repeat: no-repeat;background-position: 0px;">
                <div class="title">
                    科幻电影《沙丘》中国首映礼
                </div>
                <div class="more">
                    <img src="https://p1.meituan.net/moviemachine/8de6710fb4c92e2d22c236ef8e86bff059705.png@43w_43h_80q"
                        alt="" class="img-1">
                    <div class="one">嘿果树</div>
                    <img src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q" alt=""
                        class="img-2">
                    <div class="two">55</div>
                </div>
            </div>
        </a>
        <a href="https://i.maoyan.com/asgard/live/index?_v_=yes&id=6980169">
            <div class="content-img" style="background-image: url(http://p0.meituan.net/moviemachine/1807f29d874c01819533d7a1af48ebca253353.png); background-size: cover; background-repeat: no-repeat;background-position: 0px;">
                <div class="title">
                    电影拍摄现场，是大制作无疑了
                </div>
                <div class="more">
                    <img src="https://p0.meituan.net/moviemachine/e80549d229045181f4e783e62fe99c1669825.png@43w_43h_80q"
                        alt="" class="img-1">
                    <div class="one">大闹好莱坞</div>
                    <img src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q" alt=""
                        class="img-2">
                    <div class="two">209</div>
                </div>
            </div>
        </a>
    </div>
    <div class="last">
        <a href="./index.html" class="last-nav">
            <img src="./img/movie.png" alt="">
            <span>电影/影院</span>
        </a>
        <a href="./video.html" class="last-nav">
            <img src="./img/selectvideo.png" alt="">
            <span style="color: #F03D37;">视频</span>
        </a>
        <a href="./small-video.html" class="last-nav">
            <img src="./img/shortvideo.png" alt="">
            <span>小视频</span>
        </a>
        <a href="./yanchu.html" class="last-nav">
            <img src="./img/show.png" alt="">
            <span>演出</span>
        </a>
        <a href="login.html" class="last-nav">
            <img src="./img/my.png" alt="">
            <span>我的</span>
        </a>
    </div>
</body>
<script>
        (function () {
        function w() {
            var all = document.documentElement;  // 获取html元素
            var test = all.getBoundingClientRect().width;  // 获取当前设备的宽度、
            console.log(123,test)
            if (test > 1024) {
                test = 1024;
            }
            rem = test / 18.75;
            console.log(rem)
            all.style.fontSize = rem + 'px'
        }
        w();
        window.addEventListener("resize", function () {
            w()
        }, false)
    })();
</script>
</html>